<template>
	<div oncontextmenu="return false;" :class="$style.main"
		:style="[`transform:translate(${_xy.x}px, ${_xy.y}px);top:${point.y}px;left:${point.x}px;`,sizestr]"
		v-show="_show">
		<div :class="$style.head" @mousedown="hMouseDown">
			<div :class="$style.h_txtbox">
				<div> {{title}}</div>
			</div>
			<button type="button" @click="_show=false"> ✕ </button><!-- ✕ -->
		</div> 
		<div :class="$style.body">
			<slot></slot>
		</div>
	</div>
</template>

<script setup>
	import {
		computed,
		reactive,
		ref,
		watch,
		onMounted,
		onUnmounted,
		nextTick,
	} from "vue";
 

	const _xy = ref({
		x: 0,
		y: 0
	});
	const _show = ref(false);

	watch(props, p => {
		_show.value = p.show;
	})
	watch(_show, v => {
		if (!v) {
			emits('onHide');
		}
	});

	const sizestr = ref("");
	const _move = ref(false);
	const hMouseDown = (e) => {
		e.preventDefault();
		_move.value = true;
	};
	const hMouseUp = (e) => {
		e.preventDefault();
		_move.value = false;
	};

	watch(() => _move.value, (p, l) => {
		var m = _move.value;
		if (m) {
			document.addEventListener("mousemove", hMove, false);
			document.addEventListener("mouseup", hMouseUp, false);
		} else {
			document.removeEventListener("mouseup", hMouseUp);
			document.removeEventListener("mousemove", hMove);
		}

	});

	const hMove = (e) => {
		//e.preventDefault();
		if (!_move.value) {
			return;
		}
		//console.log(e);
		_xy.value.x += e.movementX;
		_xy.value.y += e.movementY;
	};

	const hPageShow = () => {
		_xy.value = {
			x: 0,
			y: 0
		};
		_show.value = props.show;
	};
	const hPageHide = () => {
		_move.value = false;
	};

	//属性定义
	const props = defineProps({
		title: {
			type: String,
			default: "窗口标题"
		},
		show: {
			type: Boolean,
			default: true
		},
		point: {
			type: Object,
			default: {
				x: 0,
				y: 0
			}
		}
	});

	//传出事件 
	const emits = defineEmits(['onTest', 'onHide']);
	//内部执行
	//emits(evs[0]);
	//绑定 @onTest=function(){}


	const hCallIn = {
		setSize: (d) => {
			sizestr.value = d;
			_xy.value = {
				x: 0,
				y: 0
			};
		}
	};

	//爆露 属性 refdoom.value.hHide
	defineExpose({
		hCallIn: hCallIn
	});

	//卸载
	onUnmounted(hPageHide);

	//加载
	onMounted(() => nextTick(hPageShow));
</script>


<style module>
	.main {
		background: white;
		/* url(/imgs/bg-win.png); */
		background-size: 100% 100%;
		position: absolute;
		display: flex;
		flex-direction: column;
		pointer-events: all;
		z-index: 9999;
		min-width: 300px;
		min-height: 200px;
		top: 0;
		height: auto;
		width: auto;
	}

	.main> {
		font-size: calc(1vh * 1.2);
		/* color: #4AA4F7; */
	}

	.head {
		height: 30px;
		position: relative;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #eee;
		cursor: move;
	}

	/* .head::selection {
		cursor: move;
	} */

	.h_txtbox {
		height: calc(100% - 8px);
		width: calc(100% - 40px);
		margin-top: 4px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		overflow: hidden;
	}

	.h_txtbox div {
		letter-spacing: 0.4vh;
		color: #eee;
		text-indent: .5em;
		font-style: italic;
		font-size: 18px;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.body {
		padding: 10px;
		height: 100%;
	}

	.body * {
		font-size: 16px;
	}
</style>